/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
// Include all of Ionic
$ionicons-font-path: "../../lib/ionic/fonts" !default;
@import "../../lib/ionic/scss/ionic";
@import "normalize";
@import "compass/css3";
@import "variables";
@import "mixins";

.today {
  @include circle(35px);
  background: transparent; /* Can be set to transparent */
  border: 2px $light solid;
}

.bar .border-none {
  border: none;
  border: 0px !important;
  border-bottom-color: transparent !important;
  background-image: none;
  border-bottom: none;
}

.calendar-content {
  @extend .stable-bg;
  padding-top: 30px;
}

.calendar-grid-header-row {
  @extend .row;
  @extend .row-no-padding;
  position: absolute;
  width: 100%;
  top: $bar-height;
  z-index: 10000;
}

.calendar-grid-header-col {
  @extend .col;
  @extend .stable-bg;
  //@extend .light;
  color: #a2a2a2;
  text-align: center;
  border: none;
  font: {
    weight: bold;
  }
}

.calendar-grid-col-label {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #333;
  &.out {
    color: #aeaeae;
  }
}

.calendar-slide {
  padding: 22px 1px 1px 1px;
}

.calendar-grid-row {
  @extend .row;
  @extend .row-no-padding;
}

.calendar-grid-col {
  @extend .col;
  @extend .stable-bg;
  height: 80px;
  border: dotted 1px #eeeeee;
}

.calendar-grid-col-selected {
  border: 1px solid $balanced;
}

.day-label-out {
  color: #aaa;
}

.date-form {
  width: 100%;
  height: 200px;
  padding: 0px;
  margin: 0px;
}

body {
  font: 13px 'Helvetica Neue', Arial;
  line-height: 22px;
}

.list .item .item-content {
  position: relative;
  padding: 2px 2px 2px 2px;
  border: none;
}

.col-14 {
  @include flex(0, 0, 14.28%);
  max-width: 14.28%;
}

.procBar {
  position: absolute;
  height: 15px;
  width: 100%;
  opacity: 0.7;
  font-size: 10px;
  line-height: 15px;
  color: $light;
  font-weight: bolder;
  white-space: nowrap;
  font {
    color: $light;
    size: 10px;
  }
  &.red {
    background-color: $assertive;
  }

  &.yellow {
    background-color: #fff936;
  }

  &.blue {
    background-color: blue;
  }

  &.green {
    background-color: green;
  }
}

.nav-animation {
  @include transition(2s, linear, all);
  &.ng-enter {
    opacity: 0;
    @include transform(scale(0.5, 0.5));
    &.ng-enter-active {
      opacity: 1;
      @include transform(scale(1, 1));
    }
  }
  &.ng-leave {
    opacity: 1;
    @include transform(scale(1, 1));
    &.ng-leave-active {
      opacity: 0;
      @include transform(scale(0.5, 0.5));
    }
  }
}

.menu-four {
  width: 90%;
  height: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  .right-border {
    border-right: $stable solid 1px;
  }
  .bottom-border {
    border-bottom: $stable solid 1px;
  }
  td {
    padding: 25px;
  }
  h2 {
    color: $calm;
    font: {
      size: 13px;
      color: $calm;
      weight: bolder;
    }
  }

  h3 {
    color: #aeaeae;;
    font: {
      size: 10px;
      color: #aeaeae;
      weight: bold;
    }
  }
}






